<template>
  <div id="app">
    <h2 id="hygl">背景图片加载中.........</h2>
    <div class="ssqwe">
      <el-form
        class="registers"
        ref="sizeForm"
        :model="sizeForm"
        :rules="sizeFormRules"
        label-width="80px"
        size="mini"
        style="margin-left: 30%"
      >
        <h2>注册</h2>
        <el-form-item label="用户名" prop="username">
          <el-col>
            <el-input v-model="sizeForm.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col>
            <el-input v-model="sizeForm.password" show-password></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-col>
            <el-input v-model="sizeForm.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-col>
            <el-input v-model="sizeForm.idcard"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col>
            <el-input v-model="sizeForm.email"></el-input><br />
          </el-col>
        </el-form-item>
        <el-button
          size="mini"
          round
          style="margin-top: -10px; margin-left: 300px"
          @click="toemail"
          >点击验证</el-button
        >
        <!-- <el-form-item label="验证码" prop="code" style="margin-top: 5px;">
          <el-col>
            <el-input v-model="sizeForm.code"></el-input>
          </el-col> -->
        <!-- </el-form-item> -->
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit(sizeForm)"
             >立即注册</el-button
          >
          <el-button @click="resetForm('sizeForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data() {
        return {
              sizeForm: {
                 username: '',
                 password: '',
                 phone:'',
                 email: '',
                 idcard: '',
                },
           
          sizeFormRules:{
             username:[
            {required:true, message:'请输入用户名', trigger:'blur'},
             { validator: true,trigger: 'blur' },
            {min:2, max:6, message:'长度在2到6个字符之间', trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码', trigger:'blur'},
            { validator: true, trigger: 'blur' },
            {min:2, max:6, message:'长度在6到9个字符之间', trigger:'blur'}
          ],
           phone:[
            {required:true, message:'请输入手机号', trigger:'blur'},
            { validator: true, trigger: 'blur' },
            {min:11, max:11, message:'长度必须是11位', trigger:'blur'}
          ],
            idcard:[
            {required:true, message:'请输入身份证号', trigger:'blur'},
            { validator: true, trigger: 'blur' },
            {min:18, max:18, message:'长度必须是18位', trigger:'blur'}
          ],
          email:[
            {required:true, message:'请输入邮箱', trigger:'blur'},
             { validator: true, trigger: 'blur'}, 
            {type:'string',message:'邮箱格式不正确',trigger:'blur',
              transform(value){
                if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)){
                  return true
                }else{
                }
              }
            },
            {max:20,message:'长度不能超过20位', trigger:'blur' }
          ],
          }
         }
         
        },
    methods:{
         onSubmit(formName) {
      
          console.log(this.loginForm);
        this.$http.post('/register',this.sizeForm)
        .then(response=>{
          console.log(response);
          if (response.data.success==true) {
             this.$router.push('/login')
               this.$message({
               type:'success',
                    message:'注册成功,请登录！'
          })
          }else{
          this.$router.push('/register')
          this.$message({
               type:'warning',
                    message:'注册失败'
          })
          }
        })
      },
      resetForm(formName) {
       this.$refs[formName].resetFields();
      },
      toemail(){
        this.$http.get("/findEmail",{
          params: {email:this.sizeForm.email}
        })
        .then(response => {
          console.log(response);
            if (response.data.message=='邮箱可以使用') {
               this.$message({
                    type:'success',
                    message:'邮箱可以使用'
           })
            }else if (response.data.message=='邮箱不能为空') {
                         this.$message({
                    type:'warning',
                    message:'该邮箱不能位空'
           })
            }else{
                            this.$message({
                    type:'warning',
                    message:'该邮箱已被注册'
           })
            }
           
        })
      },
   }
}
</script>

<style>
.registers {
  border-radius: 15px;
  background-clip: padding-box;
  /* margin: 8% auto; */
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  margin-left: 80%;
  margin-top: -100px;
}

.ssqwe {
  margin-left: 50%;
}
#hygl {
  margin-right: 1200px;
  margin-top: 200px;
}
</style>
